<template>
  <div class="page">
    <m-header :title="Exchange.exchange_record" :canback="Boolean(1)"></m-header>
    <div class="body">
      <nav-item :navlist="navlist" @change="change"></nav-item>
      <ul class="list-title">
        <li class="list-name">CSQA</li>
        <li class="list-name">{{ExchangeRecord.dollar_mount}}</li>
        <li class="list-name">{{ExchangeRecord.exchange_time}}</li>
      </ul>
      <img src="../../assets/images/loading1.gif" v-show="bool" class="load-img" />
      <ul v-lazy-load="lazyLoad" :style="'height:'+(screenHeight-133.6)+'px;overflow:auto;'">
        <!-- <li  class="list-title">
          <span>8</span>
          <span>8</span>
          <span>8</span>
        </li>-->
        <li v-for="item in exchInfo" :key="item.id" class="list-title">
          <span class="list-time">{{item.csqa}}</span>
          <span class="list-time">{{item.wallet_dollar}}</span>
          <span class="list-time">{{item.exchange_time}}</span>
        </li>
        <li v-if="noMore" class="noMore">{{MyTeam.no_more}}</li>
      </ul>
    </div>
    <m-load ref="load"></m-load>
  </div>
</template>
<script>
import navItem from "@/components/order-nav-item.vue";
import { Owner } from "@/server/server.js";
import { Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      type: 0,
      exchInfo: [],
      noMore: false,
      screenHeight: 667,
      bool: true,
      formData: {
        type: "csqa",
        page: 1
      },
      navlist: [
        {
          id: 0,
          name: "美金至CSQA"
        },
        {
          id: 1,
          name: "CSQA至美金"
        }
      ],
      Exchange: {},
      ExchangeRecord: {},
      MyTeam: {},
    };
  },
  created() {
    this.Exchange = this.lang.Exchange;
    this.ExchangeRecord = this.lang.ExchangeRecord;
    this.MyTeam = this.lang.MyTeam;
    this.navlist[0].name = this.ExchangeRecord.dollar_to_csqa;
    this.navlist[1].name = this.ExchangeRecord.csqa_to_dollar;
  },
  mounted() {
    this.exchangeRecord();
    this.screenHeight = window.screen.availHeight || window.screen.height;
  },
  computed: {
    ...mapGetters(["uid", "lang"])
  },
  methods: {
    exchangeRecord() {
      Owner.exchangeRecord(this.formData).then(res => {
        if (res.code == 1) {
          //   console.log(res.data);
          this.bool = false;
          console.log(res.data.record);
          this.exchInfo = this.exchInfo.concat(res.data.record);
          if (res.data.page > res.data.allPage) this.noMore = true;
          //   console.log(this.listData);
        } else {
          mui.toast(res.msg);
          this.bool = false;
          return false;
        }
      });
    },
    change(id) {
      this.formData.page = 1;
      this.bool = true;
      this.exchInfo = [];
      this.noMore = false;
      [this.formData.page, this.bool, this.exchInfo, this.noMore] = [
        1,
        true,
        [],
        false
      ];
      if (id == 0) {
        this.formData.type = "csqa";
        this.exchangeRecord(this.formData);
      } else {
        this.formData.type = "wallet_dollar";
        this.exchangeRecord(this.formData);
      }
    },
    lazyLoad() {
      if (!this.noMore) {
        this.formData.page = this.formData.page + 1;
        this.exchangeRecord(this.formData);
      }
    }
  },
  components: {
    navItem
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  //   padding: @margin-primary;
  background-color: white;
  .list-title {
    .display-flex();
    // justify-content: space-around;
    align-items: center;
    padding: 21px 0;
    font-size: 32px;
    border-bottom: 1px solid #eee;
    .list-name {
      flex: 1;
      text-align: center;
    }
    .list-time {
      flex: 1;
      text-align: center;
    }
  }
  .noMore {
    padding: 10px;
    text-align: center;
    font-size: 30px;
    color: #999;
  }
  .load-img {
    display: block;
    margin: 10px auto;
  }
}
</style>